<template>
    <!-- 题目介绍 -->
    <el-drawer
    title="预览"
    :visible.sync="drawer"
    :direction="direction"
    :with-header="false"
    :before-close="handleClose"
    :size="size"
    >
        <div class="box">

            <h3>{{ topic.title }}</h3>
            <div style="display: flex;">
                难度：<el-rate v-model="topic.level"
                    disabled
                    ></el-rate>
            </div>
            <br>
            <div v-html="topic.content" v-highlight class="content"></div>
            
            <div v-if="answerItem" style="line-height: 30px;margin-top: 30px;">
                <h3>答题</h3>
                <div>
                    <span class="fw">结果：</span>
                    <el-tag
                        :type="['danger', 'success', ''][answerItem.result]">
                        {{ ['错误', '正确', ''][answerItem.result] }}
                    </el-tag>
                </div>
                <div>
                    <div class="fw">代码：</div>
                    <div v-highlight>
                        <pre v-html="answerItem.code"></pre>
                    </div>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    props : {
        topic : {
            default : {},
            type : Object
        },
        drawer : {
            type : Boolean,
            default : false
        },
        direction : {
            // default : 'btt',
            default : sessionStorage.getItem('ispc') == 'true' ? 'rtl' : 'btt',
            type : String
        },
        size : {
            default : sessionStorage.getItem('ispc') == 'true' ? '40%' : '70%',
            type : String
        },
        answerItem : {
            type : Object
        }
    },
    methods : {
        handleClose(){
            this.$emit('handleClose', false)
        }
    }
}
</script>

<style lang="scss" scoped>
.box{
    padding: 20px;
    .content{
        line-height: 30px;
        --padding: 40px;
    }
    .fw{
        // font-weight: 900;
    }
}
</style>